<template>
	
 	<div>
 		<el-dialog title="操作品牌" :visible.sync="dialogFormVisible">
		  <el-form :model="brandJuniorParam">
		    <el-form-item label="品牌名称" :label-width="formLabelWidth">
		      <el-input v-model="brandJuniorParam.brandName" @change="getBrandInitial()"></el-input>
		    </el-form-item>
		    <el-form-item label="是否显示" :label-width="formLabelWidth">	      
		        <el-radio-group v-model="brandJuniorParam.brandStatus" >
		                <el-radio label= "0">显示</el-radio>
		                <el-radio label= "1">不显示</el-radio>
		              </el-radio-group>
		    </el-form-item>
			<el-form-item label="适用大类" :label-width="formLabelWidth">
				  <el-transfer
				    filterable
				    v-model="brandJuniorParam.sortIds"
				    :data="bigSorts"
					@change="testChange()"
					>
				  </el-transfer>				
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="addBrand()">确 定</el-button>
		  </div>
		</el-dialog> 
		

		<el-row>
			<el-col :span="13">
				<span style="color: #FFFFFF;">占位</span>
			</el-col>
			<el-col :span="11">
				<el-tag type="info">模糊查询</el-tag>
			</el-col>
		</el-row>
		<el-row>
		  <el-col :span="13">
			<i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
		  </el-col>
		  <el-col :span="6">
			  <el-input v-model="getBrandParam.brandNameInitial" placeholder="请输入品牌名称或首字母查询"></el-input>
		  </el-col>
		  <el-col :span="1"><span style="color: #FFFFFF;">占位</span></el-col>
		  <el-col :span="4"><el-button type="info" plain @click="getBrandBy()">点击查询</el-button></el-col>
		</el-row>
		<el-divider></el-divider>
		
		<el-row>
		  <el-col :span="12">
			<span style="color: #FFFFFF;">占位</span>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openAddBrand()">新增品牌</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openUpdate()" v-if="multipleSelection.length==1">修改品牌</el-button>
			  <el-button type="info" plain @click="openUpdate()" v-else disabled="">修改品牌</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="delBrand()" v-if="multipleSelection.length!=0">删除品牌</el-button>
			  <el-button type="info" plain @click="delBrand()" v-else disabled="">删除品牌</el-button>
		  </el-col>
		</el-row>
		
		
		
		<el-table ref="multipleTable" :data="brandData" :row-style="rowStyle" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
		    <el-table-column type="selection" width="55">
		    </el-table-column>
		    <el-table-column prop="brandId" label="品牌号" width="180">
		    </el-table-column>
		    <el-table-column prop="brandName" label="品牌名称" width="180">
		    </el-table-column>
			<el-table-column prop="brandInitial" label="品牌首字母" width="180">
			</el-table-column>
			<el-table-column prop="brandStatus" label="显示状态" width="180" :formatter="forcode">
			</el-table-column>
		  </el-table>
		
		<div>
			<el-pagination background layout="prev, pager, next" :current-page="currentPage" :total="manytotle" :page-size="5" @current-change="manycode">
			</el-pagination>
		</div>
		
		
		
	</div>
	
	
</template>

<script>
	export default {
		name:"brand",
		data(){
			return {
				currentPage: 1,
				brandData: [],
				getBrandParam: {
					pageParam:{
						indexPage: 1,
						size: 5
					},
					brandNameInitial:null
				},
				multipleSelection: [],
				manytotle: 0,
				dialogFormVisible: false,
				formLabelWidth: '120px',
				brandJuniorParam:{
					    brandId: null,
					    brandName: null,
					    brandInitial: null,
					    brandIntroduce: null,
					    brandStatus: null,
					    sortIds: []
						},
				bigSorts: [],
				brandDatas:[]
			}
		},
		methods:{
			getBrandBy(){
				this.getBrandParam.pageParam.indexPage=1
				this.getBrand();
			},
			rowStyle({row, rowIndex}){
				let stylejson={}
				if(row.brandStatus==1){
					stylejson.color='grey'
					return stylejson
				}else{
					stylejson.color='black'
					return stylejson
				}
			},
			forcode(row){
				return row.brandStatus==0?'显示':'停用';
			},
			testChange(){
				console.log(this.brandJuniorParam.sortIds)
			},
			openUpdate(){
				this.brandJuniorParam.brandId=this.brandDatas[0].brandId;
				this.brandJuniorParam.brandName=this.brandDatas[0].brandName;
				this.brandJuniorParam.brandStatus=this.brandDatas[0].brandStatus+''
				this.getSortIds();
				this.dialogFormVisible=true
			},
			getSortIds(){
				this.$http.get("/pawnbackgroundsystem/brandsort/getSortIds?brandId="+this.multipleSelection[0]).then(resp=>{
					console.log(resp)
					this.brandJuniorParam.sortIds=resp.data.data	
				})
			},
			addBrand(){
				this.getBrandInitial();
				this.$http.post("/pawnbackgroundsystem/brand/brandJunior",this.brandJuniorParam).then(resp=>{
					this.dialogFormVisible=false
					this.getBrand();
					this.brandJuniorParam={
											brandId: null,
											brandName: null,
											brandInitial: null,
											brandIntroduce: null,
											brandStatus: null,
											sortIds: []
											}
				})
			},
			getBrandInitial(){
				var name=this.brandJuniorParam.brandName
				let pinyin = require('js-pinyin');
				pinyin.setOptions({checkPolyphone: false, charCase: 0});
				this.brandJuniorParam.brandInitial=pinyin.getCamelChars(name);
			},
			getBigSort(){
				this.$http.get("/pawnbackgroundsystem/sort/getBigSorts").then(resp=>{
					console.log(resp)
					this.bigSorts=resp.data.data
					
				})
			},
			openAddBrand(){
				this.dialogFormVisible=true
			},
			delBrand(){
				this.$http.delete("/pawnbackgroundsystem/brand/delBrand?intList="+this.multipleSelection).then(resp=>{
					this.multipleSelection=[]
					this.getBrand();
				})
			},
			ceshi(){
				let pinyin = require('js-pinyin');
				pinyin.setOptions({checkPolyphone: false, charCase: 0});
				console.log(pinyin.getCamelChars("销户"))
			},
			manycode(index){
				this.currentPage=index
				this.getBrandParam.pageParam.indexPage=index;
				this.getBrand();
			},
			getBrand(){
				this.$http.post("/pawnbackgroundsystem/brand/getBrand",this.getBrandParam).then(resp=>{
					console.log(resp)
					this.brandData=resp.data.data.lb;
					this.currentPage=resp.data.data.indexPage
					this.manytotle=resp.data.data.totle
					// this.getBrandParam.brandNameInitial=null;
				})
			},
			handleSelectionChange(val) {
				this.brandDatas=val
				this.multipleSelection=[]
				for(var i=0;i<val.length;i++){
					this.multipleSelection.push(val[i].brandId)
				}
			}
		},
		created(){
			this.getBrand();
			this.getBigSort();
		}
	}
	
</script>

<style>
</style>
